<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 定位 -->
<!-- float 浮动定位  float：left  浮动定位是相对于浮动元素的父元素定位  脱离文档流 -->
<style>
    .box{
       margin: 100px 200px;
       overflow: hidden;
    }
    .box>div{
        float: left;
    }
    .dom{
       width: 800px; 
       height: 500px;
       background: red;
       /* margin-left:300px; */
       /* //相对定位 */
       /* position: relative; */
       /* left:100px; */
    }
    p{
        position: absolute;
        right:100px;
        top:300px;
    }
    /* 如果一个元素 没有设置position 他默认就是静态定位 设置 left right bottom top z-index是不起作用的， 对于margin  padding起作用   不脱离文档流 */


    /* position:定位  静态定位（static）  相对定位（relative 不脱离文档流）   绝对定位（absolute）   固定定位（fixed） */

    .back{
        width:200px;
        height: 200px;
        background: skyblue;
        position: fixed;
        right:50px;
        bottom:100px;
    }
</style>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>


    <div class="dom">
        <!-- absolute是相对于带有定位的父元素进行定位  脱离文档流 -->
        <!-- 没有找到定位的父元素  以文档作为参照 -->
        <p>我是absolute定位的元素</p>
    </div>

   <!-- 固定定位 脱离文档流  相对于整个文档进行定位 -->
    <div class="back">返回顶部</div>
</body>

</html>